<template>
  <ul class="xiaomi-list">
    <li class="xiaomi-item" v-for="item in list.slice(intell_num1, intell_num2)" :key="item.id">
      <router-link :to="'/cartCategroy/' + item.id">
        <div class="xiaomi-item-top">
          <van-image :src="item.image_url"></van-image>
        </div>

        <div class="xiaomi-item-bottom">
          <p class="text-item xiaomi-name">{{ item.zh_name }}</p>
          <p class="text-item xiaomi-description">{{ item.description }}</p>
          <p class="text-item xiaomi-price">￥{{ item.price }}</p>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
import { getAllTopCategories } from "@/api/category";
import { onMounted, ref } from "@vue/runtime-core";
export default {
  props: {
    intell_num1: {
      type: Number,
      required: true
    },
    intell_num2: {
      type: Number,
      required: true
    }
  },
  setup() {
    const list = ref([]);
    onMounted(async () => {
      const data = await getAllTopCategories();
      console.log(data);
      list.value = data.data[2].products;
    });

    return {
      list,
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.xiaomi-list {
  display: flex;
  flex-wrap: wrap;
  .xiaomi-item {
    display: flex;
    flex-direction: column;
    width: 123px;
    height: 177px;
    border: 1px solid #f5f5f5;
    .xiaomi-item-top {
      width: 123px;
      height: 110px;
      background-color: #fff;
      overflow: hidden;
      .van-image {
        max-height: 110px;
      }
    }
    .xiaomi-item-bottom {
      width: 123px;
      box-sizing: border-box;
      padding: 12px 5px 0;
      overflow: hidden;
      .text-item {
        width: 115px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 18px;
        line-height: 18px;
        text-align: center;
      }
      .xiaomi-name {
        font-size: 12px;
        font-weight: 700;
        color: #333;
      }
      .xiaomi-description {
        font-weight: 300;
        font-size: 10px;
        text-align: center;
      }
      .xiaomi-price {
        font-size: 14px;
        color: #ea625b;
        font-weight: 700;
      }
    }
  }
}
</style>